<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Management System</title>
    <style type="text/css">
    
    *  {
        box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font: 16px/20px microsft yahei;
        }

        .wrap {
            width: 100%;
            height: 100%;
            padding: 10% 0;
            position: fixed;
            opacity: 0.8;
            background: linear-gradient(to bottom right,#656565, whitesmoke);
            background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
        }

        .container {
            width: 60%;
            margin: 0 auto;
        }

        .container h1 {
            text-align: center;
            color: #FFFFFF;
            font-weight: 500;
            
        }

        .container input {
            width: 320px;
            display: block;
            height: 36px;
            border: 0;
            outline: 0;
            padding: 6px 10px;
            line-height: 24px;
            margin: 40px auto;
            -webkit-transition: all 0s ease-in 50ms;
            -moz-transition: all 0s ease-in 50ms;
            transition: all 0s ease-in 50ms;
        }

        .container button {
            width: 320px;
            display: block;
            height: 36px;
            border: 0;
            outline: 0;
            padding: 6px 10px;
            line-height: 24px;
            margin: 40px auto;
            -webkit-transition: all 0s ease-in 50ms;
            -moz-transition: all 0s ease-in 50ms;
            transition: all 0s ease-in 50ms;
            font-size: 16px;
            letter-spacing: 2px;
            color: #666666;
            background-color: #FFFFFF;
        }
        

        .container input[type="text"] , .container input[type="password"]  {
            background-color: #FFFFFF;
            font-size: 16px;
            color: #50a3a2;
        }

        /* .container button[type='submit'] {
            font-size: 16px;
            letter-spacing: 2px;
            color: #666666;
            background-color: #FFFFFF;
        } */

        /* .container input:focus {
            width: 400px;
        } */

        .container input[type='text']:hover {
            cursor: pointer;
            width: 400px;

        }

        .container input[type='password']:hover {
            cursor: pointer;
            width: 400px;

        }

        .container button:hover {
            cursor: pointer;
            width: 400px;

        }

        .to_contract{
            color: #50a3a2;

        }

        .text{
            color: #656565;

        }

        .wrap ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -20;
        }

        .wrap ul li {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            border-radius: 50%;
            background-color:#e1e4e8;
            animotion: square 25s infinite;
            -webkit-animation: square 25s infinite;
        }

        .wrap ul li:nth-child(1) {
            left: 0;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }

        .wrap ul li:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 15s;
            -moz-animation-duration: 15s;
            -o-animation-duration: 15s;
            -webkit-animation-duration: 11s;
        }

        .wrap ul li:nth-child(3) {
            left: 20%;
            width: 25px;
            height: 25px;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }

        .wrap ul li:nth-child(4) {
            width: 50px;
            height: 50px;
            left: 30%;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }

        .wrap ul li:nth-child(5) {
            width: 60px;
            height: 60px;
            left: 40%;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }

        .wrap ul li:nth-child(6) {
            width: 75px;
            height: 75px;
            left: 50%;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }

        .wrap ul li:nth-child(7) {
            left: 60%;
            width: 30px;
            height: 30px;
            animation-duration: 8s;
            -moz-animation-duration: 8s;
            -o-animation-duration: 8s;
            -webkit-animation-duration: 8s;
        }

        .wrap ul li:nth-child(8) {
            width: 90px;
            height: 90px;
            left: 70%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }

        .wrap ul li:nth-child(9) {
            width: 50px;
            height: 50px;
            left: 80%;
            animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            -webkit-animation-duration: 20s;
        }

        .wrap ul li:nth-child(10) {
            width: 75px;
            height: 75px;
            left: 90%;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            animation-delay: 6s;
            animation-duration: 30s;
            -moz-animation-duration: 30s;
            -o-animation-duration: 30s;
            -webkit-animation-duration: 30s;
        }

        @keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }

            100% {
                bottom: 400px;
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }

        @-webkit-keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }

            100% {
                bottom: 400px;
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }
    </style>

    <script>
        function XMLHTTP() {
            let xmlhttp;
            if (window.XMLHttpRequest)
                xmlhttp=new XMLHttpRequest();
            else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                windows.alert("Sorry!\nThis type of browser is not supported!");
            }

            return xmlhttp;
        }

        function postXMLDoc() {
            let xmlhttp = XMLHTTP();

            xmlhttp.onreadystatechange = () => {    
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
                        // window.alert("Login successfully!"); 
                        window.location = "./shell";
                    }
                    else if (xmlhttp.status == 401){
                        window.alert("Login failed!");
                    }
                    else {
                        
                    }
                }
            }

            let method = "POST";
            let url = "/login";  
            let username = document.getElementById("username").value;
            let password = document.getElementById("password").value;
            let async = false;

            let obj = {
                "username": username,
                "password": password,
            };

            console.log(obj);

            xmlhttp.open(method, url, async);
            xmlhttp.send(JSON.stringify(obj));
        }
    </script>
</head>

<body>

    <div class="wrap">

    <div class="container">

        <h1 style="color: white; margin: 0; text-align: center">Login in</h1>

        <!-- <form> -->

        <label><input id="username" type="text" placeholder="Your username" style="border-radius:9px;"/></label>

        <label><input id="password" type="password" placeholder="password" style="border-radius:9px;" /></label>


            <button type = "submit" style="border-radius:9px;" onclick="postXMLDoc();">Login in</button>

            <p class="change_link" style="text-align: center; font-size: xx-small ; margin-top: 50px;">

                <span class="text">File Management System — Designed by</span>

                <a href="https://github.com/IceyBlackTea/OS-File-System" class="to_contract"> IceyBlackTea</a>

            </p>

        <!-- </form> -->

    </div>

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

</body>

</html>
